import React, { useLayoutEffect } from 'react';
import {
  View,
  Image,
  Text,
  navigateTo,
  hideMenuButton,
  exitMiniProgram,
  router,
} from '@ray-js/ray';
import Strings from '@/i18n';
import clsx from 'clsx';
import styles from './index.module.less';

export function Tab({ tab, setTab }: { tab: string; setTab: (tab: string) => void }) {
  return (
    <View className={styles.tabContainer}>
      <View
        className={clsx(styles.tab, tab === 'toiletVisit' ? styles.tabActive : '')}
        onClick={() => setTab('toiletVisit')}
      >
        <Text>{Strings.getLang('toiletVisit')}</Text>
      </View>
      <View
        className={clsx(styles.tab, tab === 'toiletTime' ? styles.tabActive : '')}
        onClick={() => setTab('toiletTime')}
      >
        <Text>{Strings.getLang('toiletTime')}</Text>
      </View>
    </View>
  );
}

export default Tab;
